{% extends 'main.html' %}



{% block title %}
    <title>好友报表</title>
{% endblock %}


{% block content %}


<div id="main" style="width: 350px;height:500px;" class="pull-left"></div>
<div id="city" style="width: 700px;height:500px;" class="pull-right"></div>


<script src="/static/js/echarts.common.min.js"></script>
<script>
var myChart = echarts.init(document.getElementById('main'));
var city = echarts.init(document.getElementById('city'));
var option = {
    title : {
        text: '好友性别分布',
        subtext: '',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['男','女','未设置']
    },
    series : [
        {
            name: '性别',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:{{ boy }}, name:'男'},
                {value:{{ girl }}, name:'女'},
                {value:{{ null }}, name:'未设置'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
var city_div = {
    title : {
        text: '好友城市分布',
        subtext: '',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        right: '-20',
        data: [
            {% for k,v in city_dict.items %}
                '{{ k }}',
            {% endfor %}
        ]
    },
    series : [
        {
            name: '城市名称',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {% for k,v in city_dict.items %}
                    {value:{{ v }}, name:'{{ k }}'},
                {% endfor %}


            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
myChart.setOption(option);
city.setOption(city_div);
</script>
{% endblock %}
